<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<canvas width="500" height="500" id="ballCanvas"></canvas>
		<script>
			var centerPoint = {x:150, y:150};
			var r = 50;
			var minR = 5;
			var maxR = 50;
			var cxt = document.getElementById("ballCanvas").getContext("2d");
			var angle = 60*Math.PI/180;
			var step=1, timing;
			var addFlag = true;
			
			var drawCircle = function(){
				cxt.clearRect(0, 0, 500, 500);
				//1
				cxt.beginPath();
				cxt.arc(centerPoint.x-r*Math.cos(angle), centerPoint.y-r*Math.sin(angle), r, 0, 2*Math.PI);
				cxt.closePath();
				cxt.fillStyle="rgba(174,221,222,0.5)";
				cxt.fill();
				//2
				cxt.beginPath();
				cxt.arc(centerPoint.x+r*Math.cos(angle), centerPoint.y-r*Math.sin(angle), r, 0, 2*Math.PI);
				cxt.closePath();
				cxt.fillStyle="rgba(174,221,222,0.5)";
				cxt.fill();
				//3
				cxt.beginPath();
				cxt.arc(centerPoint.x+r, centerPoint.y, r, 0, 2*Math.PI);
				cxt.closePath();
				cxt.fillStyle="rgba(174,221,222,0.5)";
				cxt.fill();
				//4
				cxt.beginPath();
				cxt.arc(centerPoint.x+r*Math.cos(angle), centerPoint.y+r*Math.sin(angle), r, 0, 2*Math.PI);
				cxt.closePath();
				cxt.fillStyle="rgba(174,221,222,0.5)";
				cxt.fill();
				//5
				cxt.beginPath();
				cxt.arc(centerPoint.x-r*Math.cos(angle), centerPoint.y+r*Math.sin(angle), r, 0, 2*Math.PI);
				cxt.closePath();
				cxt.fillStyle="rgba(174,221,222,0.5)";
				cxt.fill();
				//6
				cxt.beginPath();
				cxt.arc(centerPoint.x-r, centerPoint.y, r, 0, 2*Math.PI);
				cxt.closePath();
				cxt.fillStyle="rgba(174,221,222,0.5)";
				cxt.fill();
				
				if(addFlag){
					r+=step;
				}else{
					r-=step;
				}
				
				if(r<minR){
					addFlag = true;
				}else if(r>maxR){
					addFlag = false;
				}
				
				timing = setTimeout("drawCircle()", 100);
			};
			
			drawCircle();
		</script>
	</body>
</html>
